body{
    margin: 0;
}

*{
    box-sizing: border-box;
}
.page-body{
    height: calc(100vh - 130px);
    overflow-y: scroll;
    background-color: white;
}
.s-page-body{
    height: calc(100vh - 88px);
    overflow-y: scroll;
    background-color: #F8F8F8;
}
.spage{
    height: calc(100vh - 88px);
    overflow-y: scroll;
    background-color: #F8F8F8;
}
.page-top{
    height:calc(100vh - 124px);
    overflow-y: scroll;
    background-color: #F8F8F8;
}
.page-tfour{
    height:calc(100vh - 44px);
    overflow-y: scroll;
    background-color: #F8F8F8;
}






.pagein-enter{
    transform: translate(100%,0);
}
.pagein-enter-active{
    transition: all 0.7s;
    position: absolute;
    z-index: 10;
}
.pagein-leave-active{
    transition: all 0.7s;
    position: absolute;
}
.pagein-enter-to,.pagein-leave{
    transform: translate(0,0);
}
.pagein-leave-to{
    transform: translate(-30%,0);
}


.pageout-enter{
    transform: translate(-30%,0);
}
.pageout-enter-active,.pageout-leave-active{
    transition: all 0.7s;
    position: absolute;
}
.pageout-leave-active{
    z-index: 10;
}
.pageout-enter-to,.pageout-leave{
    transform: translate(0,0);
}
.pageout-leave-to{
    transform: translate(100%,0);
}